<template>
	<view class="main">
		<u-empty mode="news" icon="/static/moreNoticeImg/无新闻列表.png" v-if="!noticeList.length"></u-empty>
		<view class="noticeBox" v-for="(item, index) in noticeList" :key="item._id" @click="noticeDetails(item)">
			<view class="noticeTitle">{{ item.title }}</view>
			<view class="noticeImg">
				<image :src="item.picurl" mode="aspectFill"></image>
			</view>
			<view class="noticeDate">
				<view class="read_likeBox">
					<u-tag :text="`阅读 ${item.read}`" type="success" size="mini" icon="eye" plain></u-tag>
					<u-tag :text="`点赞 ${item.like}`" type="primary" size="mini" icon="thumb-up" plain></u-tag>
				</view>
				<uni-dateformat class="dateBox" :date="item.date" format="yyyy/MM/dd"></uni-dateformat>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			skeletonLoading: true,
			noticeList: []
		};
	},
	onLoad() {
		this.getAllNotice();
	},
	onPullDownRefresh() {
		this.getAllNotice().then((res) => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		noticeDetails(item) {
			setTimeout(() => {
				uni.$emit('notice', item);
			}, 300);
			uni.navigateTo({
				url: `/pages/noticeDetails/noticeDetails`
			});
		},
		getAllNotice() {
			return new Promise((resolve) => {
				uni.showLoading({
					title: '数据加载中...'
				});
				uniCloud
					.callFunction({
						name: 'get_notice_rows'
					})
					.then((res) => {
						this.noticeList = res.result.data;
						this.skeletonLoading = false;
						uni.hideLoading();
						resolve(true);
					});
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
	.noticeBox {
		box-sizing: border-box;
		width: 750rpx;
		height: 480rpx;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		.noticeTitle {
			// border: 1rpx solid black;
			box-sizing: border-box;
			height: 50rpx;
			color: #f3a73f;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: bold;
			font-size: 28rpx;
		}
		.noticeImg {
			flex: 1;
			padding: 10rpx 0;
			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		.noticeDate {
			border-bottom: 1rpx solid #f4f4f5;
			box-sizing: border-box;
			color: #82848a;
			padding: 20rpx 0;
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
			.read_likeBox {
				display: flex;
				align-items: center;
				justify-content: center;
				.u-transition {
					margin-right: 20rpx;
				}
			}

			.dateBox {
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
